<template>
	<div>
		<div class="Rating-gray">
			<i v-for="item,index in itemClasses" :key="index" :class="item" class="fa fa-star"></i>
		</div>
	</div>
</template>

<script>
	//星星长度
	const LENGTH=5;
	//星星的class
	const CLS_ON="fa-star"
	const CLS_HALF="fa-star-half-empty";
	const CLS_OFF="fa-star-o";
	
	export default{
		props:{
			rating:Number
		},
	computed:{
		itemClasses(){
			//4.8四个全星一个半星
			let result=[];
			//对分数进行梳理
			let score=Math.floor(this.rating*2)/2
			//控制半星
			let hasDecimal=score%1!==0;
			//全星
			let integer=Math.floor(score);
			for(let i=0;i<integer;i++){
				result.push(CLS_ON);
			}
			//半星
			if(hasDecimal){
				result.push(CLS_HALF);
			}
			//补齐
			while(result.length<LENGTH){
				result.push(CLS_OFF);
			}
			return result;
		}
	}
	}
</script>

<style>
	.Rating-gray{
		margin-right: 5px;
		color: #ffbe00;
		display: inline-block;
	}
</style>
